<template>
  <div class="login-page">
    <div class="login-content">
      <van-nav-bar>
        <template #title>
          <div class="title"> 登录 </div>
        </template>
      </van-nav-bar>
      <van-form @submit="submit" :model-value="formData" class="form-content">
        <van-field
          v-model="formData.account"
          name="account"
          label="账号"
          placeholder="邮箱/用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="formData.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 20px">
          <van-button block type="primary" native-type="submit">登录</van-button>
        </div>
      </van-form>
      <router-link to="/register" class="link">还没有账号,去注册</router-link>
    </div>
  </div>
</template>

<script lang="ts" setup name="LoginPage">
  import { reactive, ref } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  // import { encryptByMd5 } from '@/utils/common';

  const userStore = useUserStore();
  const router = useRouter();
  const formData = reactive({
    account: '',
    password: '',
  });
  const ruleForm = ref<any>(null);
  const submit = async () => {
    // formData.password = encryptByMd5(formData.password);
    const { account, password } = formData;
    // ruleForm.value.validate().then(async ({ valid, errors }: any) => {
    //   if (valid) {
    const res = await userStore.login({ account, password });
    if (res) {
      console.info('登录后返回的参数===>', res);
      router.push({ path: '/home' });
    }
    // }
    // else {
    //   console.log('error submit!!', errors);
    // }
    // });
  };
</script>

<style scoped lang="scss">
  .login-page {
    box-sizing: border-box;
    height: calc(100vh - 0px);
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    background-image: url('@/assets/login.png');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
    .login-content {
      margin: auto;
      padding: 40px 30px 100px 30px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      opacity: 0.85;
      .title {
        font-size: 40px;
        font-weight: 600;
      }
      .form-content {
        font-size: 50px;
      }
    }

    .link {
      font-size: 25px;
      color: #069;
      float: right;
      margin-right: 20px;
    }
  }
</style>
